<template>
    <el-drawer
      v-model="visible"
      :title="title"
      direction="rtl"
      size="50%"
      @closed="handleClose"
    >
      <el-form 
        :model="localForm" 
        :rules="rules" 
        ref="formRef" 
        label-width="120px"
        class="drawer-form"
      >
        <el-form-item label="应用ID" prop="appId">
          <el-input v-model="localForm.appId" />
        </el-form-item>
        <el-form-item label="私钥" prop="privateKey">
          <el-input v-model="localForm.privateKey" type="textarea" rows="4" />
        </el-form-item>
        <el-form-item label="支付宝公钥" prop="aliPublicKey">
          <el-input v-model="localForm.aliPublicKey" type="textarea" rows="4" />
        </el-form-item>
        <el-form-item label="异步通知地址" prop="notifyUrl">
          <el-input v-model="localForm.notifyUrl" />
        </el-form-item>
        <el-form-item label="同步返回地址" prop="returnUrl">
          <el-input v-model="localForm.returnUrl" />
        </el-form-item>
        <el-form-item label="网关地址" prop="gatewayUrl">
          <el-input v-model="localForm.gatewayUrl" />
        </el-form-item>
        <el-form-item label="环境类型" prop="payType">
          <el-radio-group v-model="localForm.payType">
            <el-radio :label="0">沙箱环境</el-radio>
            <el-radio :label="1">生产环境</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
  
      <template #footer>
        <div class="drawer-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>
      </template>
    </el-drawer>
  </template>
  
  <script setup lang="ts">
  import { ref, watch, computed } from 'vue'
  import type { FormInstance } from 'element-plus'
  import type { AlipayItem } from '@/types/alipay'
  
  const props = defineProps({
    visible: {
      type: Boolean,
      required: true
    },
    formData: {
      type: Object as () => AlipayItem,
      required: true
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  })
  
  const emit = defineEmits(['update:visible', 'save'])
  
  const formRef = ref<FormInstance>()
  const localForm = ref<AlipayItem>({ ...props.formData })
  
  const title = computed(() => props.isEdit ? '编辑配置' : '新增配置')
  
  const rules = {
    appId: [{ required: true, message: '请输入应用ID', trigger: 'blur' }],
    privateKey: [{ required: true, message: '请输入应用私钥', trigger: 'blur' }],
    aliPublicKey: [{ required: true, message: '请输入支付宝公钥', trigger: 'blur' }],
    gatewayUrl: [{ required: true, message: '请输入网关地址', trigger: 'blur' }]
  }
  
  watch(() => props.formData, (newVal) => {
    localForm.value = { ...newVal }
  })
  
  const visible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
  })
  
  const handleSubmit = async () => {
    try {
      await formRef.value?.validate()
      emit('save', localForm.value)
      visible.value = false
    } catch (error) {
      console.log('表单验证失败')
    }
  }
  
  const handleClose = () => {
    formRef.value?.resetFields()
  }
  </script>
  
  <style scoped lang="scss">
  .drawer-form {
    padding: 20px;
    
    .el-textarea {
      :deep(textarea) {
        font-family: Monaco, Consolas, monospace;
        font-size: 12px;
      }
    }
  }
  
  .drawer-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
  }
  </style>